<template>
  <div>
    <el-dialog title="新增数据字典" @close="closeUser" :visible.sync="isShow" width="890px" @open="openCreate"
      :close-on-click-modal="false" center>
      <div v-loading="loading">
        <div class="content">
          <el-card>
            <el-form size="mini" ref="form" :model="form" :rules="rules" inline label-width="140px"
              label-position="left">
              <el-row :gutter="10">
                   <el-col :span="12">
                  <el-form-item prop="DataKey" label="键值">
                    <el-input  v-model="form.DataKey" placeholder="请输入键值"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="DataKeyVal" label="意义">
                    <el-input  v-model="form.DataKeyVal" placeholder="请输入键值意义" ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
          <div style="text-align:center;margin-top:20px">
            <el-button size="mini" @click="addType">取消</el-button> 
            <el-button type="primary" size="mini" @click="add" >确认</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import request from "@/common/utils/request";
import toolBox from "@/common/utils/toolBox";
import keyCode from "@/message/basicmanagement/datadictionary/data-dictionary-KeyCode";
import add from "@/message/basicmanagement/datadictionary/data-dictionary-add";
import getGlobalParams from "@/common/utils/getGlobalParams";
export default {
  name: "",
  data() {
    return {
      BusinessList: [],
      AppNumList: [],
      loading: false,
      form: {
        DataKey: "",
        DataKeyVal: ""
      },
      rules: {
        DataKey: [
          {
            required: true,
            message: "键值不能为空",
            trigger: "change"
          }
        ],
        DataKeyVal: [
          {
            required: true,
            message: "意义不能为空",
            trigger: "change"
          }
        ]
      }
    };
  },
  props: {
    //父元素传递的数据
    option: Object
  },
  components: {},
  computed: {
    isShow: {
      //创建用户弹窗是否显示
      get: function() {
        return this.option.isShow;
      },
      set: function(newValue) {
        this.option.isShow = newValue;
      }
    }
  },
  created: function() {},
  methods: {
    add() {
      let resBody = new keyCode();
      resBody.data.DataKeyVal = this.form.DataKey;
      request(resBody).then(response => {
        if (response.RspInfo.Result != null) {
          this.$message({
            type: "warning",
            message: "数据已存在!"
          });
          this.loading = false;
        } else {
          this.add1();
        }
      });
    },
    add1() {
      let resBody = new add();
      resBody.data.DataKeyVal = this.form.DataKey;
      resBody.data.Meaning = this.form.DataKeyVal;
      resBody.data.DataKey = this.option.currentRow[0].DataKeyVal;
      resBody.data.PreserveFlag = this.option.currentRow[0].PreserveFlag;
      request(resBody)
        .then(response => {
          if (response.SYS_HEAD.ReturnCode === "000000") {
            this.$emit("refreshTable");
            this.isShow = false;
            this.$message({
              type: "success",
              message: "新增成功!"
            }).catch(() => {
              this.isShow = false;
              this.$refs["form"].clearValidate(); //清楚表单验证
              this.$refs["form"].resetFields(); //清楚表单验证
            });
            this.isShow = false;
          } else {
            this.$message({
              type: "warning",
              message: "新增失败!" + response.SYS_HEAD.ReturnMessage
            });
            this.loading = false;
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    openCreate() {
      //打开弹窗事件
      this.loading = true;
      if (this.$refs.form) {
        this.$refs["form"].clearValidate(); //清楚表单验证
      }
      this.loading = false;
    },
    closeUser() {
      //关闭弹窗清楚表单数据并清楚表单验证
      if (this.$refs["form"] != undefined) {
        this.$refs["form"].resetFields(); //清楚表单验证
        this.$refs["form"].clearValidate(); //清楚表单验证
      }
      this.$emit("refreshTable");
    },
    addType() {
      //关闭弹窗事件，清楚表单验证
      this.option.isShow = false;
      this.$refs.form.clearValidate();
    }
  }
};
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
}

// .footer {
//   width: 100%;

//   margin-top: 10px;
// }
.require {
  color: red;
}

.dialog-text {
  display: inline-block;
  width: 100%;
  text-align: center;
  color: red;
  font-size: 18px;
}

.role {
  width: 95%;
  border: 1px solid #eee;
  border-radius: 4px;
  height: 290px;

  .roleHeader {
    color: #606266;
    font-weight: 500;
    font-size: 14px;
    background: #f5f7fa;
    height: 42px;
    box-sizing: border-box;
    padding: 9px;
    overflow-y: auto;
  }
}

.el-card {
  overflow: inherit;
}
</style>
